<template>
  <div class="wp-emp">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="员工职位" :key="tab1" name="1">
      <div class="wp-emp__content">
      <div class="relation_emp">
        <el-button type="warning" @click="relationEmp">关联员工</el-button>
      </div>
      <page-table
        ref="product_entry"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column label="姓名" prop="employeeName"></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="直属部门" prop="mainDepartmentName"></el-table-column>
                <el-table-column label="职位"  show-overflow-tooltip>
            <template slot-scope="scope">
                  {{ formatterPosition(scope.row.positionInfoList)}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-tooltip content="编辑" placement="top">
                <el-link class="el-icon-edit" @click.native="relationEmpEdit(scope.row)"></el-link>
              </el-tooltip>
                <el-tooltip content="复制" placement="top">
                <el-link class="el-icon-copy-document"  @click.native="copyPosition(scope.row)"></el-link>
              </el-tooltip>
                <el-tooltip content="删除" placement="top">
                <el-link class="el-icon-delete" @click.native="deleteRelationEmp(scope.row)"></el-link>
              </el-tooltip>
          </template>
        </el-table-column>
      </page-table>
    </div>
    </el-tab-pane>
    <el-tab-pane  lazy   label="职位权限" :key="tab2" name="2">
            <RightInfo :data="positionInfo"  @afterSave="afterSaveRelationEmp"/>
    </el-tab-pane>
  </el-tabs>
  <RelationEmp  v-if="relationVisible" :visible.sync="relationVisible" :data="positionInfo" title="关联员工"/>
  <CopyEmployeePosition @afterSave="afterSaveRelationEmp" v-if="copyPositionVisible" :visible.sync="copyPositionVisible" :data="employeeInfo" title="复制员工职位"/>
  <EmployeePosition @afterSave="afterSaveRelationEmp" v-if="employeePositionVisible"  :visible.sync="employeePositionVisible" :data="employeeInfo" :title="employeePositionTitle"/>
  </div>
</template>

<script>
import PageTable from '@/components/PageTable'
import RelationEmp from './detail/RelationEmp'
import EmployeePosition from './detail/EmployeePosition'
import CopyEmployeePosition from './detail/CopyEmployeePosition'
import Mixins from '../mixins'
import RightInfo from './detail/RightInfo'
export default {
  name: 'Emp_position',
  props: {
    param: Object,
    empTypeSelectInfo: {type: Object,
      default: () => {
        return {}
      }}
  },
  components: {PageTable, RelationEmp, EmployeePosition, CopyEmployeePosition, RightInfo},
  mixins: [Mixins],
  watch: {
    param: {
      handler (val) {
        if (val && val.positionCode) {
          this.positionInfo = {...val}
          this.searchParams.positionCode = this.positionInfo.positionCode
          this.handleSearch(this.searchParams)
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      id: 'employee',
      activeName: '1',
      tab1: '1',
      tab2: '2',
      positionInfo: {},
      employeeInfo: {},
      allRightInfoList: [],
      employeePositionVisible: false,
      employeePositionTitle: false,
      relationVisible: false,
      copyPositionVisible: false
    }
  },
  methods: {
    relationEmp () {
      this.relationVisible = true
    },
    relationEmpEdit (data) {
      this.employeeInfo = data
      this.employeePositionTitle = '编辑员工职位'
      this.employeePositionVisible = true
    },
    copyPosition (data) {
      this.employeeInfo = data
      this.copyPositionVisible = true
    },
    deleteRelationEmp (data) {
      this.$msgBox.confirm('确定删除员工' + (this.positionInfo.positionName || '') + '职位', () => {
        const param = {}
        param.employeeCode = data.employeeCode
        param.positionCode = this.positionInfo.positionCode
        this.requestOption('deleteEmployeePositon', param, res => {
          this.search(this.searchParams)
        })
      })
    },
    handleClick (tab) {
      if (tab.name === '1') {
        this.tab1 = Math.random()
      } else if (tab.name === '2') {
        this.tab2 = Math.random()
      }
    },
    afterSaveRelationEmp () {
      this.search(this.searchParams)
    },
    handleSearch (param) {
      this.searchParams = {...param}
      this.searchParams.positionCode = this.positionInfo.positionCode
      this.search(this.searchParams)
    }

  }
}
</script>

<style lang="scss" scoped>
>>>.el-tabs__item{
  height: 50px;
  line-height: 50px;
}
.wp-emp{
  padding: 0 15px;
  // &__header{
  //   font-size: 16px;
  //   font-weight: 600;
  //   border-bottom: 1px solid #e6e6e6;
  //   height: 50px;
  //   line-height: 50px;
  //   display: flex;
  //   flex-direction: row;
  //   justify-content: space-between;
  //   padding-left: 15px;
  // }
  &__content{
    overflow: auto;
    height: calc(100% - 50px);
    overflow-y: overlay;
    overflow-x: overlay;
    .relation_emp{
      text-align: right;
    }
  }
}
</style>
